import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import css from './index.module.scss'
import LazyImage from '@/components/LazyImage'
export default class ResponsiveImage extends PureComponent {

    static propTypes = {
        src: PropTypes.string.isRequired,
        size: PropTypes.string,
        style: PropTypes.object,
        round: PropTypes.bool,
        webp: PropTypes.bool
    }

    get nopic() {
        return this.props.src.indexOf('noface') > -1
    }

    get enableWebp() {
        return !this.nopic && this.props.webp
    }

    get url() {
        return this.props.src + (this.nopic ? '' : this.props.size)
    }

    static defaultProps = {
        size: '@480w_270h_1c',
        round: false,
        webp: true
    }

    render() {
        const { style, className, round } = this.props
        return (
            <div className={`${css['wrap']} ${className ? className : ''} ${round ? css['wrap-round'] : ''}`} style={style}>
                <LazyImage className={css['img']} src={this.url} webp={this.enableWebp} />
                {this.props.children}
            </div>
        )
    }
}
